{extend name="common/layout" /}
{block name="main"}
<div class="el-breadcrumb">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>房屋管理</el-breadcrumb-item>
    <el-breadcrumb-item>房号管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<el-button type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
<div style="margin-top: 15px;">
  <el-table :data="tableData" stripe border style="width: 100%" header-align="center">
    <el-table-column prop="property_name" label="房产">
    </el-table-column>
    <el-table-column prop="name" label="房号">
    </el-table-column>
    <el-table-column prop="rent_mark" label="房间情况" key="slot" width="95">
      <template #default="scope">
        <el-switch v-model="scope.row.rent_mark" class="switch" disabled inactive-color="#85ce61" active-value="N"
          inactive-value="Y" active-text="空闲" inactive-text="已租" />
      </template>
    </el-table-column>
    <el-table-column prop="rent_date" label="收租日期">
    </el-table-column>
    <el-table-column prop="rental" label="房租">
    </el-table-column>
    <el-table-column prop="deposit" label="押金">
    </el-table-column>
    <el-table-column label="操作" key="slot" width="350">
      <template #default="scope">
        <el-button size="mini" type="info" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="success" v-if="scope.row.rent_mark=='N'" @click="handleCheckin(scope.row)"
          icon="el-icon-circle-plus-outline">租房</el-button>
        <el-button size="mini" type="warning" v-if="scope.row.rent_mark=='Y'" @click="handleCheckout(scope.row)"
          icon="el-icon-remove-outline">退房</el-button>
        <el-button size="mini" type="primary" @click="handleContract(scope.row)" icon="el-icon-document">合同</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 15px;">
    <el-pagination background layout="total, prev, pager, next" :total="pageTotal" v-model::current-page="currentPage"
      @current-change="changeTable">
    </el-pagination>
  </div>
</div>

<el-dialog :title="titleContent" v-model="dialogFormVisible">
  <el-form :model="formData" :rules="rules" ref="formData">
    <el-form-item label="房产" :label-width="formLabelWidth" prop="house_property_id">
      <el-select v-model="formData.house_property_id" placeholder="请选择">
        <template v-for="item in houseList" :key="item.id">
          <el-option :label="item.name" :value="item.id">
          </el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
      <el-input v-model="formData.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="房租" :label-width="formLabelWidth" prop="rental">
      <el-input v-model.number="formData.rental" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="押金" :label-width="formLabelWidth" prop="deposit">
      <el-input v-model.number="formData.deposit" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="管理费" :label-width="formLabelWidth" prop="management">
      <el-input v-model.number="formData.management" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="逾期日租金" :label-width="formLabelWidth" prop="daily_rent">
      <el-input v-model.number="formData.daily_rent" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="水费单价" :label-width="formLabelWidth" prop="water_price">
      <el-input v-model="formData.water_price" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电费单价" :label-width="formLabelWidth" prop="electricity_price">
      <el-input v-model="formData.electricity_price"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave()">确 定</el-button>
    </span>
  </template>
</el-dialog>

<el-dialog title="添加租客" v-model="rentalFormVisible">
  <el-form :model="rentalForm" :rules="rentalRules" ref="rentalForm">
    <el-form-item label="房产" :label-width="formLabelWidth" prop="house_property_name">
      <el-input v-model="rentalForm.house_property_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="房号" :label-width="formLabelWidth" prop="house_number_name">
      <el-input v-model="rentalForm.house_number_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="入住日期" :label-width="formLabelWidth" prop="checkin_time">
      <el-date-picker type="date" v-model="rentalForm.checkin_time" value-format="YYYY-MM-DD" placeholder="选择日期"
        style="width: 100%;">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="租客姓名" :label-width="formLabelWidth" prop="name">
      <el-input v-model="rentalForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
      <el-select v-model="rentalForm.sex" placeholder="请选择">
        <el-option label="男" value="M"></el-option>
        <el-option label="女" value="F"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
      <el-input v-model.number="rentalForm.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="id_card_number">
      <el-input v-model.number="rentalForm.id_card_number" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="籍贯" :label-width="formLabelWidth" prop="native_place">
      <el-input v-model="rentalForm.native_place"></el-input>
    </el-form-item>
    <el-form-item label="工作单位" :label-width="formLabelWidth" prop="work_units">
      <el-input v-model="rentalForm.work_units"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="rentalFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="checkin()">确 定</el-button>
    </span>
  </template>
</el-dialog>

<el-dialog title="退房" v-model="checkoutVisible">
  <el-form :model="checkoutForm" :rules="checkoutRules" ref="checkoutForm">
    <el-form-item label="房号" :label-width="formLabelWidth" prop="house_number_name">
      <el-input v-model="checkoutForm.house_number_name" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="退房日期" :label-width="formLabelWidth" prop="leave_time">
      <el-date-picker type="date" v-model="checkoutForm.leave_time" value-format="YYYY-MM-DD" placeholder="选择日期"
        style="width: 100%;">
      </el-date-picker>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="checkoutVisible = false">取 消</el-button>
      <el-button type="primary" @click="checkout()">确 定</el-button>
    </span>
  </template>
</el-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    dialogFormVisible: false,
    formLabelWidth: '120px',
    titleContent: '',
    formData: {},
    rules: {
      house_property_id: [{ required: true, message: '请选择', trigger: 'change' }],
      name: [{ required: true, message: '请输入', trigger: 'blur' }],
      rental: [{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number', message: '必须为数字值' }],
      deposit: [{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number', message: '必须为数字值' }],
      management: [{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number', message: '必须为数字值' }],
      daily_rent: [{ required: true, message: '请输入', trigger: 'blur' }, { type: 'number', message: '必须为数字值' }],
      water_price: [{ required: true, message: '请输入', trigger: 'blur' }],
      electricity_price: [{ required: true, message: '请输入', trigger: 'blur' }],
    },
    rentalFormVisible: false,
    rentalForm: {},
    rentalRules: {
      house_property_name: [{ required: true, message: '请输入', trigger: 'blur' }],
      house_number_name: [{ required: true, message: '请输入', trigger: 'blur' }],
      checkin_time: [{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }],
      name: [{ required: true, message: '请输入', trigger: 'blur' }],
      phone: [{ type: 'number', message: '必须为数字值' }],
      id_card_number: [{ type: 'number', message: '必须为数字值' }],
    },
    checkoutVisible: false,
    checkoutForm: {},
    checkoutRules: {
      leave_time: [{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }],
    },
    // 分页
    pageTotal: 0,
    currentPage: 1,
  };
  function f() {
    return {
      init: function () {
        let that = this;
        axiosGet("{:url('query')}", { 'page': this.currentPage }).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      changeTable(val) {
        let that = this;
        axiosGet("{:url('query')}", { 'house_property_id': this.houseDef, 'page': val }).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
        this.currentPage = val;
      },
      handleEdit(row) {
        this.titleContent = '修改房号'
        this.dialogFormVisible = true;
        this.formData = JSON.parse(JSON.stringify(row));
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleDelete(row) {
        let that = this;
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axiosPost("{:url('delete')}", row).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }).catch(() => { });
      },
      handleAdd() {
        this.titleContent = '新增房号'
        this.dialogFormVisible = true;
        this.formData = { 'house_property_id': this.houseDef };
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleSave() {
        let that = this;
        let validation = false;
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('save')}", this.formData).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.dialogFormVisible = false
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      },
      handleCheckin(row) {
        this.rentalFormVisible = true;
        this.rentalForm = {
          'house_property_id': this.houseDef, 'house_property_name': row.property_name,
          'house_number_id': row.id, 'house_number_name': row.name,
        };
        if (this.$refs['rentalForm']) {
          this.$refs['rentalForm'].resetFields();
        }
      },
      checkin() {
        let that = this;
        let validation = false;
        this.$refs['rentalForm'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('checkin')}", this.rentalForm).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.rentalFormVisible = false
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      },
      handleCheckout(row) {
        this.checkoutVisible = true;
        this.checkoutForm = {
          'id': row.id, 'leave_time': new Date().toLocaleDateString().split('/').map(item => { if (item < 10) { return '0' + item } else { return item } }).join('-'),
          'house_number_name': row.name,
        };
        if (this.$refs['checkoutForm']) {
          this.$refs['checkoutForm'].resetFields();
        }
      },
      checkout() {
        let that = this;
        let validation = false;
        this.$refs['checkoutForm'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('checkout')}", this.checkoutForm).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.checkoutVisible = false
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      },
      handleContract(row) {
        axiosDownload("{:url('contract')}", { id: row.id });
      },
    }
  }
</script>
{/block}